<template>
  <link rel="stylesheet" href="/assets/css/email.css" />
  <header class="header">
    <h1 class="title">邮箱验证</h1>
  </header>

  <div class="user">
    <div class="avatar">
      <img :src="business.avatar_text" />
    </div>
  </div>

  <!-- 表单 -->
  <div class="form">
    <van-form @submit="auth">
      <van-cell-group inset>
        <van-field
          v-model="email"
          :readonly="business.auth == '1' ? true : false"
          name="email"
          label="邮箱"
          placeholder="邮箱"
          :rules="[
            { required: true, message: '请填写邮箱地址' },
            {
              pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
              message: '邮箱格式不正确',
            },
          ]"
        />
        <van-field
          v-model="code"
          :readonly="business.auth  == '1' ? true : false"
          name="code"
          label="验证码"
          :placeholder="placeholder"
          :rules="[{ required: true, message: '请输入验证码' }]"
        />

        <div class="btn">
          <div style="width: 40%; margin: 20px auto" v-show="!business.auth">
            <van-button
              round
              block
              :disabled="disabled"
              :loading="loadingcode"
              type="primary"
              color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
              @click="getCode(this)"
            >
              {{ text }}
            </van-button>
          </div>
          <!-- 提交按钮 -->
          <div style="width: 40%; margin: 20px auto" v-show="!business.auth">
            <van-button
              round
              block
              :loading="loading"
              type="primary"
              native-type="submit"
              color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
            >
              确定
            </van-button>
          </div>
        </div>
      </van-cell-group>
    </van-form>
  </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const business = proxy.$business.value;
business.auth = business.auth == '1' ? true : false;
//响应式邮箱
const email = ref(business.email)


// 验证码
const code = ref("");

const placeholder = ref(business.auth ? '已完成认证' : '请输入验证码')

//验证码按钮提示
const text = ref("发送验证码");
//按钮禁用状态
const disabled = ref(false);

//提交状态
const loading = ref(false);
const loadingcode = ref(false);

//验证码发送间隔时间
const time = ref(120);

//发送邮箱验证码
const getCode = () => {
  proxy
    .$confirm({
      message: "是否确认发送邮箱验证码",
    })
    .then(async () => {
        loadingcode.value = true
      //调用接口，发送验证码
      var res = await proxy.$POST({
        url: "business/email",
        params: { action: "getcode",email:email.value },
      });

      loadingcode.value = false
      console.log(res)
      if (res.code == 0) {
        //发送验证码失败
        proxy.$fail(res.msg);
        return;
      } else if (res.code == 1) {
        // 成功
        disabled.value = true;
        proxy.$success({message:res.msg, duration:1000})
        var T = null;
        T = setInterval(() => {
          time.value--;
          text.value = `(${time.value})重新发送`;
          if (time.value <= 0) {
            time.value = 120;
            clearInterval(T);
            text.value = `重新发送`;
            disabled.value = false;
            return;
          }
        }, 1000);
      }
    })
    .catch(() => {});
};

const auth =async (data) => {
    loading.value = true
    data.action = 'auth'
    data.busid = business.id

    var result = await proxy.$POST({
        url:'business/email',
        params:data
    })

    console.log(result)
    //修改提交按钮状态
    loading.value = false
    if(result.code == 0){
        proxy.$fail(result.msg)
        return
    }else if(result.code == 1){
        proxy.$success({
            message:result.msg,
            duration:1000,
            onClose:()=>{
                proxy.$router.push(result.url);
            }
        })
        return
    }
};
</script>